<template>
	<view class="memory-island-detail">
		<view class="top-background">

		</view>

		<view class="top">
			<view
				style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;width: 690rpx;margin-left: 30rpx;">
				<uni-icons @click="toBackPage" style="" type="left" size="25" color="#ffffff"></uni-icons>
				<view style="display: flex;flex-direction: row;">
					<uni-icons type="redo" size="30" color="#ffffff"></uni-icons>
				</view>
			</view>
		</view>
		<view class="question-info">
			<view style="display: flex; flex-direction: column;width: 690rpx;margin-left: 30rpx;">
				<view
					style="font-size: 120%; color: #ffffff; font-weight: bold; margin-top: 20rpx; margin-bottom: 10rpx">
					{{ questionInfo.title }}
				</view>
				<rich-text :nodes="questionInfo.context" :class="{'limit-line' : isOut && isNotShow}"
					style="font-size: 100%; margin-top: 10rpx;color: #eeeeee;">
				</rich-text>
				<text v-if="isOut && isNotShow" @click="showAll" class="option-text">展开</text>
				<text v-if="isOut && !isNotShow" @click="showAll" class="option-text">收起</text>
			</view>
			<view class="counts-follow">
				<view class="counts">


					<view class="item">

						<view class="item-bottom">
							关注数
						</view>
						<view class="item-top">
							{{questionInfo.followerCount}}
						</view>
					</view>
					<view class="split-line"></view>
					<view class="item">

						<view class="item-bottom">
							观点数
						</view>
						<view class="item-top">
							{{questionInfo.pointCount}}
						</view>
					</view>
					<view class="split-line"></view>
					<view class="item">

						<view class="item-bottom">
							回答数
						</view>
						<view class="item-top">
							{{questionInfo.answerCount}}
						</view>
					</view>
				</view>
				<view @click="toEditQuestion" class="follow">编辑问题</view>
			</view>
		</view>

		<view class="info">
			<view class="posts" style="min-height: 1200rpx;">
				<view class="tabs">
					<view v-for="(item,index) in manageTypes">
						<view @click="changeTab(index)" class="tab"
							:class="index == currentTypeIndex ? 'tab-current': '' ">
							<view>{{item}}</view>
							<view v-if="index == currentTypeIndex" class="tab-line"></view>
						</view>
					</view>
				</view>

				<view v-if="currentTypeIndex == 0" class="index">

				</view>

				<view v-if="currentTypeIndex == 1" class="audits">
					<view class="audit" v-for="(item,index) in checkList" @click="toAuditDetail(item)"
						:style="{'background-color' : item.isReaded ? '#eaeaea' : ''}">
						<view style="display: flex;flex-direction: column;">
							<!-- <view class="title">{{item.reportReason}}</view> -->
							<view class="type" style="margin-top: 0;">类型：{{item.contentType}}</view>
							<view class="nickname">发起人：{{item.nickname}}</view>
						</view>
					
						<uni-icons style="margin-left: 30rpx;" type="right" size="20" color="#eaeaea"></uni-icons>
					</view>
				</view>

				<view v-if="currentTypeIndex == 2" class="audits">
					<view class="audit" v-for="(item,index) in auditList" @click="toAuditDetail(item)"
						:style="{'background-color' : item.isReaded ? '#eaeaea' : ''}">
						<view style="display: flex;flex-direction: column;">
							<view class="title">{{item.reportReason}}</view>
							<view class="type">类型：{{item.contentType}}</view>
							<view class="nickname">发起人：{{item.nickname}}</view>
						</view>

						<uni-icons style="margin-left: 30rpx;" type="right" size="20" color="#eaeaea"></uni-icons>
					</view>
				</view>

				<view v-if="currentTypeIndex == 3" class="messages">
					<view v-if="messages.length===0" style="padding: 30rpx;text-align: center;font-size: 34rpx;">
						暂时还没有私信
					</view>
					<view class="message" v-for="(item,index) in messages"
						:style="{'background-color' : item.isReaded ? '#d3d3d3' : ''}">
						<view class="message-top">
							<view style="display: flex;flex-direction: row;align-items: center;">
								<view class="avatar">
									<image mode="aspectFill" :src="item.avatar"></image>
								</view>
								<view style="margin-left: 20rpx;">{{item.nickname}}</view>
							</view>
							<view class="date">昨天8:03</view>
						</view>
						<view class="message-content">{{item.content}}</view>
					</view>
				</view>


				<!-- 管理界面 -->
				<view v-show="currentTypeIndex === 4" class="manage">
					<view class="manage-buttons">
						<view class="manage-button" @click="toQuestionManage('user')">
							<view class="icon"></view>
							<view class="text">用户管理</view>
						</view>
						<view class="manage-button" @click="toQuestionManage('point')">
							<view class="icon"></view>
							<view class="text">观点管理</view>
						</view>
						<view class="manage-button" @click="toQuestionManage('answer')">
							<view class="icon"></view>
							<view class="text">回答管理</view>
						</view>
						<view class="manage-button" @click="toTeamManage()">
							<view class="icon"></view>
							<view class="text">团队管理</view>
						</view>
					</view>


					<view class="todos">

						<view class="todos-title">
							<view>近期待办</view>
						</view>

						<view class="todo" v-for="(item, index) in todoList" :key="item.id">
							<view class="todo-card"
								:style="'background-color: ' + (item.teamTodoId == null ? '' : 'rgb(212,234,253)') + ';'">
								<checkbox-group class="todo-check" @change="finishTodo(item.id)" :data-todoId="item.id">
									<checkbox value="checked"></checkbox>
								</checkbox-group>

								<view class="todo-info" style="width: 100%">
									<view class="todo-title">{{ item.title }}</view>
									<view
										style="display: flex; flex-direction: column; justify-content: space-between; margin-top: 8rpx">
										<view class="todo-brief" v-if="item.gmtEnd != null">
											截止时间：{{ item.gmtEnd ? item.gmtEnd : '无截止日期' }}</view>
										<view class="todo-brief" v-if="item.monitorId != null">负责人：{{ item.monitorName}}
										</view>
									</view>
								</view>

								<view class="todo-btns">
									<view class="detail" @tap="showTodoEdit(item)">修改</view>
									<view class="delete" @tap="deleteTodo()">删除</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				questionInfo: {},


				manageTypes: ["概览", "审核", "举报", "私信", "管理"],
				currentTypeIndex: 0,

				todoList: [{
						id: "1",
						title: "团队待办",
						gmtEnd: "",
						monitorId: "",
						monitorName: "带着脑子去流浪"
					},
					{
						id: "2",
						title: "团队待办",
						gmtEnd: "",
						monitorId: "",
						monitorName: "带着脑子去流浪"
					}
				],

				isNotShow: true,
				isOut: true,
				auditList: [],
				checkList: [],
				messages: [{
						id: "",
						content: "近几年青少年抑郁者迅速增多，许多悲观论调也流传甚广，不知道为什么，我从最初会心，我从最初会",
						nickname: "带着脑子去流浪",
						avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
						isReaded: false,
						date: null
					},
					{
						id: "",
						content: "第三章第六节的内容补充完善",
						nickname: "带着脑子去流浪",
						avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
						isReaded: false,
						date: null
					},
					{
						id: "",
						content: "第三章第六节的内容补充完善",
						nickname: "带着脑子去流浪",
						avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
						isReaded: true,
						date: null
					},
					{
						id: "",
						content: "第三章第六节的内容补充完善",
						nickname: "带着脑子去流浪",
						avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
						isReaded: true,
						date: null
					}
				],
			}
		},
		onLoad(options) {
			if (options.questionId) {
				this.questionInfo.id = options.questionId
				this.getQuestionInfo()
				this.pageReportOrderByTime()
				this.pageCheckOrderByTime()
			}
		},
		methods: {
			getQuestionInfo() {
				this.$api.getQuestionInfo({
					id: this.questionInfo.id
				}).then(res => {
					console.log(res);
					this.questionInfo = res.data
				})
			},
			pageReportOrderByTime() {
				this.$api.pageReport({
					pageNow: 1,
					pageSize: 20,
					range: 0,
					sourceId: this.questionInfo.id
				}).then(res => {
					this.auditList = res.data.rows;
				})
			},
			pageCheckOrderByTime() {
				this.$api.pageCheck({
					pageNow: 1,
					pageSize: 20,
					range: 0,
					sourceId: this.questionInfo.id
				}).then(res => {
					this.checkList = res.data.rows;
				})
			},

			// 描述的收起和展开
			showAll() {
				this.isNotShow = !this.isNotShow
			},


			toAuditDetail(audit) {
				if (audit.contentType == '求索-观点') {
					uni.navigateTo({
						url: "/pages_self/wind/manage/question/question-point-manage?questionId=" +
							this.questionInfo.id + "&linkId=" +
							audit.linkId + "&auditId=" +
							+audit.id
					})
				} else if (audit.contentType == '求索-回答') {
					uni.navigateTo({
						url: "/pages_self/wind/manage/question/question-answer-manage?questionId=" +
							this.questionInfo.id + "&linkId=" +
							audit.linkId + "&auditId=" +
							audit.id
					})
				} else if (audit.contentType == '求索-评论') {
					// uni.navigateTo({
					// 	url: "/pages_self/wind/manage/course/course-talk-manage?courseId=" +
					// 		this.courseInfo.id + "&linkId=" +
					// 		audit.linkId + "&auditId=" +
					// 		audit.id
					// })
				}

			},

			toQuestionManage(name) {
				uni.navigateTo({
					url: "/pages_self/wind/manage/question/question-" + name + "-manage?questionId=" + this
						.questionInfo.id
				})
			},

			toTeamManage() {
				uni.navigateTo({
					url: "/pages_self/wind/manage/team/team-manage?teamId=" + this.questionInfo.teamId
				})
			},
			
			toEditQuestion() {
				uni.navigateTo({
					url: "/pages_self/wind/manage/question/question-info-manage?questionId=" + this.questionInfo.id
				})
			},


			changeTab(index) {
				this.currentTypeIndex = index
			},
			toBackPage() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			toAddMemory() {
				uni.navigateTo({
					url: "/pages_being/island/memory-create"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.memory-island-detail {


		.top-background {
			position: fixed;
			z-index: 1;
			width: 100%;
			height: 600rpx;
			background: linear-gradient(#1E5D72, #5DACB1, #a7cfce);
		}

		.top {
			padding-top: 80rpx;
			z-index: 2;
			position: relative;
		}

		.question-info {
			z-index: 2;
			position: relative;

			.limit-line {
				/*超过范围进行隐藏不显示*/
				overflow: hidden;
				/*文本溢出, 使用省略号 */
				text-overflow: ellipsis;
				/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
				display: -webkit-box;
				/*限制块容器显示的文本行数, 按照你的需求设置*/
				-webkit-line-clamp: 3;
				/*盒子的方向, 垂直、水平等*/
				-webkit-box-orient: vertical;
				/*文字换行, 可以在单词内断*/
				word-wrap: break-word;
			}

			.option-text {
				position: relative;
				left: 630rpx;
				bottom: 40rpx;
				z-index: 5;
				color: #ffffff;
				// box-shadow: 0px 0px 30rpx 10rpx #ffffff;
				// background-color: rgb(255, 255, 255)
			}

			.counts-follow {
				width: 690rpx;
				margin-left: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;

				.counts {
					display: flex;
					flex-direction: row;
					font-size: 26rpx;
					color: #eeeeee;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.item {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						width: 150rpx;
						height: 80rpx;

						.item-top {
							font-size: 32rpx;
							color: #eeeeee;
						}

						.item-bottom {
							font-size: 28rpx;
							color: #eeeeee;
						}
					}

					.split-line {
						width: 3rpx;
						height: 60rpx;
						background-color: #d1d1d1;
					}
				}

				.follow {
					background-color: #DAEFEE;
					// box-shadow: 0px 0px 5rpx 3rpx #eeeeee;
					color: #144C5D;
					padding: 10rpx 30rpx;
					border-radius: 40rpx;
				}
			}
		}

		.info {
			position: relative;
			z-index: 2;

			display: flex;
			flex-direction: column;

			.posts {
				width: 100%;
				background-color: white;
				border-radius: 40rpx;
				margin-top: 20rpx;

				background-color: #F9F9F9;


				.tabs {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 40rpx;
					margin-bottom: 20rpx;
					// border-bottom: solid thin #d3d3d3;

					.tab {
						margin-left: 50rpx;
						color: gray;
						height: 65rpx;

						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
					}

					.tab-current {
						color: #2c2c2c;
						font-weight: bold;
					}

					.tab-line {
						width: 40rpx;
						height: 7rpx;
						border-radius: 5rpx;
						background-color: #2c2c2c;
					}


				}

				.index {}

				.audits {
					display: flex;
					flex-direction: column;
					width: 670rpx;
					margin-left: 20px;

					.audit {
						display: flex;
						flex-direction: row;
						margin-bottom: 30rpx;
						justify-content: space-between;
						align-items: center;
						padding: 30rpx;
						border-radius: 20rpx;
						background-color: #FFFFFF;

						.title {
							font-weight: bold;
						}

						.type {
							font-size: 28rpx;
							margin-top: 20rpx;
							color: #9d9d9d;
						}

						.nickname {
							font-size: 28rpx;
							margin-top: 5rpx;
							color: #9d9d9d;
						}

					}
				}

				.messages {
					display: flex;
					flex-direction: column;
					width: 670rpx;
					margin-left: 20px;


					.message {
						display: flex;
						flex-direction: column;
						margin-top: 20rpx;
						padding: 30rpx;
						border-radius: 10rpx;
						box-shadow: 1px 1px 8px 2px #e9eee9;

						.message-top {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: flex-start;

							.avatar {
								height: 60rpx;
								width: 60rpx;
								border-radius: 50%;
								overflow: hidden;
							}

							.date {
								font-size: 28rpx;
								color: gray;
							}

						}

						.message-content {
							margin-top: 20rpx;

							/*超过范围进行隐藏不显示*/
							overflow: hidden;
							/*文本溢出, 使用省略号 */
							text-overflow: ellipsis;
							/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
							display: -webkit-box;
							/*限制块容器显示的文本行数, 按照你的需求设置*/
							-webkit-line-clamp: 2;
							/*盒子的方向, 垂直、水平等*/
							-webkit-box-orient: vertical;
							/*文字换行, 可以在单词内断*/
							word-wrap: break-word;
						}
					}
				}


				.manage {
					display: flex;
					flex-direction: column;

					.manage-buttons {
						width: 670rpx;
						margin-left: 20px;

						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin-top: 10rpx;

						.manage-button {
							width: 130rpx;
							height: 175rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;

							.icon {
								width: 130rpx;
								height: 130rpx;
								background-color: #FFFFFF;
								border-radius: 20rpx;
							}

							.text {
								font-size: 28rpx;
							}



						}
					}

					.todos {
						display: flex;
						flex-direction: column;
						position: relative;
						z-index: 2;
						width: 720rpx;
						overflow: hidden;
						margin-left: 30rpx;




						.todos-title {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;


							font-size: 36rpx;
							margin: 40rpx 0;
							margin-left: 10rpx;
							font-weight: bold;
						}

						.todo {

							width: 690rpx;
							box-shadow: 0px 0px 4px 2px #f5f7f5;
							padding: 20rpx 0;
							border-radius: 25rpx;
							background-color: #FFFFFF;
							margin-bottom: 30rpx;


							.todo-card {
								display: flex;
								align-items: center;


								.todo-check {
									margin: 0 20rpx;
								}

								.todo-info {
									display: block;
								}

								.todo-title {
									font-size: 32rpx;
								}

								.todo-brief {
									font-size: 24rpx;
									color: gray
								}

								/* 待办滑动操作按钮 */
								.todo-btns {
									position: absolute;
									right: -310rpx;

									display: flex;
									justify-content: left;
									align-items: center;

									box-sizing: border-box;
									width: 300rpx;
									height: 120rpx;
									padding-left: 40rpx;

									text-align: center;
									color: #fff;
									line-height: 120rpx;
								}

								.todo-btns view {
									width: 80rpx;
									height: 120rpx;
									font-size: 28rpx;
									margin-right: 20rpx;
									border-radius: 20rpx;
								}

								.todo-btns .detail {
									background-color: #97C5FC;
								}
							}

							.todo-btns .delete {
								background-color: #f10e0e;
							}
						}
					}

				}
			}

		}

		.page-btns {
			display: flex;
			position: fixed;
			right: 100rpx;
			bottom: 100rpx;
			z-index: 10;
		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
